<template>
     <el-card shadow="always" :body-style="{ padding: '20px' }">
        <el-form :inline="true"  class="demo-form-inline">
            <el-form-item label="一级列表">
                <!-- 点击一级列表后，会有一个category1d的值
                在select中，如果想要显示option，select必须有双向绑定一个值，值是下边所有option的某个一个value属性值（收集的是value属性值）
                -->
                <el-select placeholder="请选择" v-model="(category1Id as number)" @change="getCategoryList2">
                    <el-option 
                    v-for="item in categoryList1"
                    :key="item.id"
                    :label="item.name" 
                    :value="item.id" />
                </el-select>
            </el-form-item>
            <el-form-item label="二级列表">
                <el-select placeholder="请选择" v-model="(category2Id as number)" @change="getCategoryList3">
                    <el-option 
                    v-for="item in categoryList2"
                    :key="item.id"
                    :label="item.name" 
                    :value="item.id" />
                </el-select>
            </el-form-item>
            <el-form-item label="三级列表">
                <el-select placeholder="请选择" v-model="(category3Id as number)">
                    <el-option 
                    v-for="item in categoryList3"
                    :key="item.id"
                    :label="item.name" 
                    :value="item.id" />
                </el-select>
            </el-form-item>
        </el-form>
    </el-card>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
    name: "Category",
});
</script>

<script setup lang="ts">
//写好pinia后，在组件中发送列表的请求
//引入attrpinia的仓库
import useAttrStore from "@/stores/attr";
import { onMounted } from "vue";
import { storeToRefs } from "pinia";

//获取仓库实例对象
const attrStore = useAttrStore()
//测试i请求
onMounted(() => {
    attrStore.getCateGoryList1()
})

//解构获取数据
const {categoryList1,category1Id,categoryList2,category2Id,categoryList3,category3Id} = storeToRefs(attrStore)

//当一级列表变化时请求二级列表,渲染
const getCategoryList2=()=>{
    //当一级变化时清空二三级
    categoryList2.value=[],
    categoryList3.value= [],
    category2Id.value= null,
    category3Id.value=null
    attrStore.getCateGoryList2()
}

//二级变化时请求三级
const getCategoryList3=()=>{
    //当二级变化时
    categoryList3.value= [],
    category3Id.value=null
    attrStore.getCateGoryList3()
}

</script>